<template>
  <div class="app-container home">
    <!--    登陆人提示-->
    <div>
      <div style="font-size: 20px;">下午好，{{ nickname }}</div>
      <p style="font-size: 16px;color: #666;">欢迎使用智慧迎新系统</p>
    </div>

    <el-row :gutter="16">
      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(144,214,244,0.34)">
              <img src="@/assets/images/paihang.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.totalCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">录取总人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(244,194,144,0.34)">
              <img src="@/assets/images/users.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.reportCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">已报到人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(244,194,144,0.34)">
              <img src="@/assets/images/users.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.reportManCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">已报到男生人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(244,194,144,0.34)">
              <img src="@/assets/images/users.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.reportWomanCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">已报到女生人数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(144,226,244,0.34)">
              <img src="@/assets/images/jiaofei.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.payCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">已缴费人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card>
          <div class="stat-card">
            <div class="stat-img" style="background-color: rgba(244,144,159,0.34)">
              <img src="@/assets/images/chuang.png" width="40" height="40" alt=""/>
            </div>
            <div class="ml10">
              <div style="display: flex">
                <div class="stat-value">{{ studentCountChartVO.dormCount }}</div>
                <img src="@/assets/images/up.png" width="24" height="24" alt=""/>
              </div>
              <div class="stat-label">已分配宿舍人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top: 16px;display: flex;flex-direction: row;">
      <el-col :span="16">
        <el-card>
          <div class="title-pine">院系报道情况</div>
          <div ref="studentChartReportDIV" class="w100" style="height: 300px"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 100%">
          <div class="title-pine">最新通知公告</div>
          <div v-for="item in noticeList" style="padding: 1rem 2rem 0">
            <div style="margin-bottom: 8px;font-size: 14px">{{ item.noticeTitle }}</div>
            <div style="font-size: 12px;color: gray"><i class="el-icon-time mr5"></i><span class="mr5">发布于</span
            >{{ item.createTime }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top: 16px">
      <el-col :span="6">
        <el-card>
          <div class="title-pine">新生报道情况</div>
          <div ref="reportCountChartDIV" class="w100" style="height: 300px"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="title-pine">男女生占比</div>
          <div style="height: 300px;display: flex;flex-direction: column;justify-content: space-between;"
          >
            <div style="padding: 32px;">
              <div style="display: flex;flex-direction: row;margin-bottom: 16px">
                <img src="@/assets/images/boy.png" width="32"/>
                <div>
                  <div style="font-size: 20px;font-weight: 400">{{ genderChartData.man }}%
                  </div>
                  <div>新生男生占比</div>
                </div>
              </div>
              <div style="background-color: #eeeeee;border-radius: 4px">
                <div :style="`width:${genderChartData.man}%`" style="background-color: #00afff;border-radius: 6px">
                  {{ genderChartData.man }}%
                </div>
              </div>

            </div>
            <div style="padding: 32px;">
              <div style="display: flex;flex-direction: row;margin-bottom: 16px">
                <img src="@/assets/images/girl.png" width="32"/>
                <div>
                  <div style="font-size: 20px;font-weight: 400">{{ genderChartData.woman }}%
                  </div>
                  <div>新生女生占比</div>
                </div>
              </div>
              <div style="background-color: #eeeeee;border-radius: 4px">
                <div :style="`width:${genderChartData.woman}%`" style="background-color: #f47d1f;border-radius: 6px">
                  {{ genderChartData.woman }}%
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="title-pine">宿舍分配情况</div>
          <div ref="domDIV" class="w100" style="height: 300px"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="title-pine">学费缴纳情况</div>
          <div ref="xuefeijiaonaqingkuangDIV" class="w100" style="height: 300px"/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { studentChartCount, studentChartGender, studentChartReport } from '@/api/student/student'
import { listNotice } from '@/api/system/notice'

export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '1.0.0',
      studentCountChartVO: {
        totalCount: 0,
        reportCount: 0,
        reportManCount: 0,
        reportWomanCount: 0,
        payCount: 0,
        dormCount: 0
      },
      studentChartReportVO: [],
      // 查询参数
      noticeQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      noticeList: [],
      reportCountChartData: [],
      domChartData: {
        // 已分配
        domCount: 4320,
        // 未分配
        noDomCount: 10640
      },
      genderChartData: {
        man: 0,
        woman: 0
      },
      // 新生报道情况
      newReportChartData: {
        '6月': 20,
        '7月': 2600,
        '8月': 40,
        '9月': 50,
        '10月': 70,
        '11月': 5600,
        '12月': 20,
        '1月': 10,
        '2月': 10,
        '3月': 40,
        '4月': 10,
        '5月': 10
      }
    }
  }, computed: {
    ...mapGetters([
      'nickname'
    ])
  },
  mounted() {
    this.initStudentChartCount()
  },
  methods: {
    initStudentChartCount() {
      studentChartCount().then(res => {
        this.studentCountChartVO = res.data
        this.initXuefeijiaonaqingkuangChart()
      })
      studentChartReport().then(res => {
        this.studentChartReportVO = res.data
        this.initStudentChartReport()
      })
      listNotice(this.noticeQueryParams).then(res => {
        this.noticeList = res.rows
      })
      this.initDomChart()
      studentChartGender().then(res => {
        this.genderChartData = res.data
        // this.initGenderChartDIV()
      })
      this.initNewReportChart()
    },
    initStudentChartReport() {
      const dateList = this.studentChartReportVO.map(function(item) {
        return item['collegeName']
      })
      const valueList = this.studentChartReportVO.map(function(item) {
        return item['count']
      })
      this.chartInstance = this.$echarts.init(this.$refs.studentChartReportDIV)
      const option = {
        title: [
          {
            left: 'center',
            textStyle: {
              fontSize: 16
            }
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList,
            gridIndex: 0,
            name: '学院',
            axisLabel: { interval: 0, rotate: 30 }
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            name: '人数'
          }
        ],
        grid: [
          {
            top: '10%'
          }
        ],
        series: [
          {
            type: 'bar',
            showSymbol: false,
            data: valueList,
            barWidth: '20%',
            // 柱状图渐变
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(option)
    },

    initXuefeijiaonaqingkuangChart() {
      this.chartInstance = this.$echarts.init(this.$refs.xuefeijiaonaqingkuangDIV)
      const unpaidCount = this.studentCountChartVO.totalCount - this.studentCountChartVO.payCount
      const payPercentage = (this.studentCountChartVO.payCount / this.studentCountChartVO.totalCount * 100).toFixed(1)
      const unpaidPercentage = (unpaidCount / this.studentCountChartVO.totalCount * 100).toFixed(1)

      const option = {
        title: {
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          formatter: (name) => {
            if (name === '已缴费') {
              return `${name}: ${this.studentCountChartVO.payCount}人 (${payPercentage}%)`
            } else {
              return `${name}: ${unpaidCount}人 (${unpaidPercentage}%)`
            }
          },
          textStyle: {
            fontSize: 14,
            rich: {
              count: {
                fontWeight: 'bold',
                color: '#333'
              }
            }
          },
          data: ['已缴费', '未缴费']
        },
        series: [
          {
            name: '缴费情况',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 2,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                formatter: '{b}\n{c}人 ({d}%)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.studentCountChartVO.payCount,
                name: '已缴费',
                itemStyle: { color: '#2f96ef' } // 绿色
              },
              {
                value: unpaidCount,
                name: '未缴费',
                itemStyle: { color: '#f49536' } // 红色
              }
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '45%',
            style: {
              text: `缴费率\n${payPercentage}%`,
              fill: '#4CAF50',
              fontSize: 18,
              fontWeight: 'bold',
              align: 'center'
            }
          }
        ]
      }

      this.chartInstance.setOption(option)
    },

    initDomChart() {
      this.chartInstance = this.$echarts.init(this.$refs.domDIV)
      const total = this.domChartData.domCount + this.domChartData.noDomCount
      const percentage = total > 0 ? (this.domChartData.domCount / total * 100).toFixed(2) : 0

      const option = {
        title: {
          text: `${this.domChartData.domCount}`,
          subtext: '已分配床位数',
          x: 'center',
          y: '35%',
          textStyle: {
            fontSize: 24,
            fontWeight: 'bold',
            color: '#333'
          },
          subtextStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '床位分配情况',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 2,
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.domChartData.domCount,
                name: '已分配',
                itemStyle: { color: '#5470c6' }
              },
              {
                value: this.domChartData.noDomCount,
                name: '未分配',
                itemStyle: { color: '#eeeeee' }
              }
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '55%',
            style: {
              text: `还有${this.domChartData.noDomCount}床位未分配`,
              fill: '#666',
              fontSize: 13
            }
          }
        ]
      }

      this.chartInstance.setOption(option)
    },

    initGenderChartDIV() {
      this.chartInstance = this.$echarts.init(this.$refs.genderChartDIV)
      // 直接使用传入的百分比值
      console.log('percentage:', this.genderChartData)
      const manPercentage = this.genderChartData.man
      const womanPercentage = this.genderChartData.woman

      const option = {
        title: {
          text: '新生性别占比',
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}%'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['男生', '女生']
        },
        series: [
          {
            name: '性别占比',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.genderChartData.man,
                name: '男生',
                itemStyle: { color: '#5470c6' },
                label: {
                  show: true,
                  formatter: `${manPercentage}%`,
                  position: 'inside',
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              {
                value: this.genderChartData.woman,
                name: '女生',
                itemStyle: { color: '#ee6666' },
                label: {
                  show: true,
                  formatter: `${womanPercentage}%`,
                  position: 'inside',
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#fff'
                }
              }
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: '20%',
            top: '75%',
            style: {
              text: `${manPercentage}%\n新生男生占比`,
              fill: '#333',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            right: '20%',
            top: '75%',
            style: {
              text: `${womanPercentage}%\n新生女生占比`,
              fill: '#333',
              fontSize: 14,
              textAlign: 'center'
            }
          }
        ]
      }

      this.chartInstance.setOption(option)
    },

    initNewReportChart() {
      this.chartInstance = this.$echarts.init(this.$refs.reportCountChartDIV)
      // 准备x轴数据（月份）
      const months = Object.keys(this.newReportChartData)
      // 准备y轴数据（数值）
      const values = Object.values(this.newReportChartData)

      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br/>数量: {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: months,
          axisLabel: {
            rotate: 45 // 如果月份标签重叠可以旋转45度
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数量',
            type: 'line',
            data: values,
            smooth: true, // 平滑曲线
            symbol: 'circle', // 数据点显示为圆形
            symbolSize: 8, // 数据点大小
            itemStyle: {
              color: '#5470C6' // 线条颜色
            },
            lineStyle: {
              width: 3 // 线条宽度
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
              ])
            },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      }

      this.chartInstance.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.stat-img {
  padding: 10px;
  border-radius: 50%;
}

.stat-value {
  font-size: 26px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 15px;
  color: #666;
}

.title-pine {
  // 实线蓝色
  border-left: 4px solid #409EFF;
  padding-left: 6px;
  font-size: 18px;
}
</style>

